.container {
    max-width: 600px; /* 调整宽度以适应不同屏幕 */
    margin: 20px auto; /* 居中并设置边距 */
    padding: 20px; /* 内边距 */
    background-color: #f4f4f4; /* 背景颜色 */
    border-radius: 8px; /* 圆角边框 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

h1 {
    text-align: center; /* 标题居中 */
    color: #333; /* 标题颜色 */
    margin-bottom: 20px; /* 标题下方留白 */
}

#timeRange {
    width: 100%; /* 下拉菜单宽度充满容器 */
    padding: 10px; /* 内边距 */
    margin-bottom: 10px; /* 底部留白 */
    border: 1px solid #ddd; /* 边框 */
    border-radius: 4px; /* 圆角边框 */
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); /* 内阴影 */
    background-color: #f6f6f6; /* 背景颜色 */
}

#searchBtn {
    padding: 10px 20px; /* 内边距 */
    border: none; /* 移除边框 */
    border-radius: 4px; /* 圆角边框 */
    background-image: linear-gradient(to right, #6dd5ed, #2193b0);
    color: white; /* 文字颜色 */
    cursor: pointer; /* 鼠标指针样式 */
    margin-right: 10px; /* 按钮间距 */
}

#searchBtn:hover {
    background-image: linear-gradient(to right, #2193b0, #6dd5ed);
}

#appointmentsList {
    margin-top: 20px; /* 列表上方留白 */
}

/* 预约信息列表样式 */
.appointment {
    background-color: #f9f9f9; /* 背景颜色 */
    padding: 15px; /* 内边距 */
    margin-bottom: 10px; /* 列表项之间留白 */
    border-radius: 4px; /* 圆角边框 */
    border: 1px solid #eee; /* 边框 */
}

.appointment p {
    margin: 5px 0; /* 段落内边距 */
    color: #666; /* 文字颜色 */
}

/* 定义取消预约按钮的样式 */
.cancel-appointment-btn {
    padding: 10px 20px;
    background-image: linear-gradient(to right, #ff7b7b, #ff4848);
    color: white; /* 白色文字 */
    border: none; /* 移除边框 */
    border-radius: 4px; /* 圆角边框 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 阴影效果 */
    cursor: pointer; /* 鼠标指针样式 */
    transition: background-color 0.3s ease; /* 背景颜色渐变效果 */
}

.cancel-appointment-btn:hover {
    ground-image: linear-gradient(to right, #ff4848, #ff7b7b);
}


.appointment strong {
    color: #333; /* 强调文字颜色 */
}

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        margin: 10px; /* 移动设备上边距调整 */
        padding: 15px; /* 移动设备上内边距调整 */
    }
}
